<template>
  <div style="padding: 24px 36px 0 36px">
    <dataCard
      v-loading="card1_loading"
      width="1848"
      height="906"
      title="训练员授课管理情况"
    >
      <div class="card1 flex">
        <!-- 卡片 -->
        <div class="cards flex">
          <div class="item" style="margin: 90px 70px 0 73px">
            <img
              class="icon"
              src="@/assets/images/screen/knowledge/icon1.png"
              alt=""
            />
            <div class="value">{{ card1_totalNum.totalNum }}</div>
            <div class="label">知识库总量</div>
          </div>
        </div>
        <!-- 知识库各类目数据 -->
        <div class="chart-box" style="margin-top: 31px">
          <div class="ranktitle flexbet">
            <div class="txt flexcolcenter">
              <img src="@/assets/images/screen/lineIcon.png" alt="" />
              知识库各类目数据
            </div>
            <div
              class="more shou"
              @click="knowledge_knowledgeCategoryStatistics_Dia_open = true"
            >
              详情 >
            </div>
          </div>
          <div
            class="chart"
            ref="datachart"
            style="width: 620px; height: 620px"
          ></div>
        </div>
        <!-- 知识库类目点击率排行榜 -->
        <div class="chart-box" style="margin-left: 65px; margin-top: 31px">
          <div class="ranktitle flexbet">
            <div class="txt flexcolcenter">
              <img src="@/assets/images/screen/lineIcon.png" alt="" />
              知识库类目点击率排行榜
            </div>
            <div
              class="more shou"
              @click="
                knowledge_knowledgeCategoryClickStatistics_Dia_open = true
              "
            >
              详情 >
            </div>
          </div>
          <div class="tableBox">
            <el-table
              :data="card1_knowledgeCategoryClickStatistics"
              style="width: 100%"
            >
              <el-table-column prop="date" label="排名" width="50">
                <template slot-scope="scope">
                  <div class="flexcen flexcolcenter" style="height: 62px">
                    <div class="No">{{ scope.$index + 1 }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="categoryName"
                label="知识类目"
                align="center"
              >
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                prop="clickNum"
                label="点击次数"
                align="center"
              >
                <template #header>
                  点击次数<el-tooltip
                    class="item"
                    effect="dark"
                    placement="bottom"
                  >
                    <i
                      class="el-icon-question shou"
                      style="
                        font-size: 16px;
                        vertical-align: middle;
                        margin-left: 5px;
                      "
                    ></i>
                    <div slot="content">2024/10/31后开始统计</div>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </dataCard>
    <knowledge_knowledgeCategoryStatistics_Dia
      :open.sync="knowledge_knowledgeCategoryStatistics_Dia_open"
    ></knowledge_knowledgeCategoryStatistics_Dia>
    <knowledge_knowledgeCategoryClickStatistics_Dia
      :open.sync="knowledge_knowledgeCategoryClickStatistics_Dia_open"
    ></knowledge_knowledgeCategoryClickStatistics_Dia>
  </div>
</template>
  
<script>
import knowledge_knowledgeCategoryStatistics_Dia from "./components/knowledge_knowledgeCategoryStatistics_Dia";
import knowledge_knowledgeCategoryClickStatistics_Dia from "./components/knowledge_knowledgeCategoryClickStatistics_Dia";
import * as echarts from "echarts";
import dataCard from "./components/dataCard";
import {
  totalNum,
  knowledgeCategoryStatistics,
  knowledgeCategoryClickStatistics,
} from "@/api/screen/knowledge";
export default {
  components: {
    knowledge_knowledgeCategoryStatistics_Dia,
    knowledge_knowledgeCategoryClickStatistics_Dia,
    dataCard,
  },
  data() {
    return {
      knowledge_knowledgeCategoryStatistics_Dia_open: false,
      knowledge_knowledgeCategoryClickStatistics_Dia_open: false,
      tableData: [],
      card1_totalNum: {},
      card1_knowledgeCategoryStatistics: [],
      card1_knowledgeCategoryClickStatistics: [],
      card1_loading: false,
    };
  },
  mounted() {
    this.getCard1_data();
  },
  methods: {
    async getCard1_data() {
      this.card1_loading = true;

      try {
        const [api1Data, api2Data, api3Data] = await Promise.all([
          totalNum(),
          knowledgeCategoryStatistics({
            pageNum: 1,
            pageSize: 8,
          }),
          knowledgeCategoryClickStatistics({
            pageNum: 1,
            pageSize: 8,
          }),
        ]);
        this.card1_totalNum = api1Data.data;
        this.card1_knowledgeCategoryStatistics = api2Data.rows;
        this.initCard1_Chart(this.card1_knowledgeCategoryStatistics);
        this.card1_knowledgeCategoryClickStatistics = api3Data.rows;
      } finally {
        this.card1_loading = false;
      }
    },
    initCard1_Chart(list) {
      const categoryNames = list
        .map((item) => {
          return item.categoryName;
        })
        ;
      const knowledgeNums = list
        .map((item) => {
          return item.knowledgeNum;
        })
        ;
      knowledgeNums;
      const chartDom = this.$refs.datachart;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        // legend: {
        //   // 图例的位置
        //   top: "20px",
        //   // 图例的文字样式
        //   textStyle: {
        //     color: "#333",
        //   },

        //   // // 图例的图标形状
        //   // icon: "circle",
        //   // 图例的数据
        //   data: ["学习任务量"],
        // },
        grid: {
          left: "5px",
          right: "10px",
          top: "15px",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: categoryNames,
        },
        series: [
          {
            name: "知识",
            type: "bar",
            stack: "total",
            label: {
              // show: true,
              // position: "top", // 文字位置
              color: "black", // 文字颜色
            },
            emphasis: {
              focus: "series",
            },
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: "#FF8A4F" }, // 渐变色起始颜色
                  { offset: 1, color: "#FFF2C8" }, // 渐变色结束颜色
                ],
                global: false, // 缺省为 false
              },
            },
            barWidth: "15px", // 设置柱状图的宽度
            data: knowledgeNums,
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.No {
  font-size: 12px;
  color: #fff3ea;
  font-style: normal;
  width: 24px;
  height: 19px;
  text-align: center;
  line-height: 19px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffa721 0%, #ff7136 100%);
}
.tableBox {
  width: 582px;
  height: 348px;
  margin-top: 10px;
  ::v-deep .el-table th {
    border: none;
    padding: 2px 0;
    height: 62px; /* 设置表头高度 */
    line-height: 62px; /* 设置表头文字的垂直对齐方式 */
  }
  ::v-deep .el-table .cell {
    height: 62px;
    line-height: 62px;
  }

  /* 更改每一行的高度 */
  ::v-deep .el-table td,
  th {
    border: none;
    padding: 2px 0;
    height: 28px; /* 设置行高 */
    line-height: 28px; /* 设置单元格文字的垂直对齐方式 */
  }
  ::v-deep .el-table .el-table__header-wrapper tr th {
    background: #f9f9f9;
  }
  ::v-deep .el-table .el-table__body tr:nth-of-type(2n + 1) {
    background: rgba($color: #000000, $alpha: 0.03);
  }
  ::v-deep .el-table .cell {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 15px;
    color: #333333;
    font-style: normal;
  }
}
.ranktitle {
  .txt {
    img {
      margin-right: 3px;
      width: 8px;
      height: 11px;
    }
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    text-align: left;
    font-style: normal;
  }
  .more {
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 12px;
    color: #666666;
    line-height: 22px;
    font-style: normal;
  }
}

.card1 {
  .cards {
    .item {
      width: 360px;
      height: 256px;
      background: #ffffff;
      box-shadow: 0px 11px 24px -11px rgba(0, 0, 0, 0.23);
      border-radius: 8px;
      border: 2px solid #ffffff;
      .icon {
        margin: 40px 144px 0 144px;
        width: 72px;
        height: 72px;
      }
      .value {
        margin-top: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 40px;
        color: #ff6801;
        line-height: 56px;
        text-align: center;
        font-style: normal;
      }
      .label {
        margin-top: 10px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: center;
        font-style: normal;
      }
    }
  }
}
</style>